<template>
	<div class="bookdetail">
		<header>

			<button @click="go(-1)">
				<i class="el-icon-arrow-left"></i>
			</button>
			<h3>书籍详情</h3>
		</header>
		<div class="body">
			<div class="title">
				<h3>{{book.name}}</h3>
				<h5>月销售量:{{book.salenum}}</h5>
			</div>

			<ul>
				<li>
					<i class="el-icon-shopping-cart-2" @click="addCart()"></i>
				</li>
				<li>
					<i class="el-icon-s-flag"></i>
				</li>
			</ul>
		</div>
		<div class="xx">
			<span>书本序号:{{book.sn}}</span>
			<span>作者:{{book.author}}</span>
			<span>出版社:{{book.maker}}</span>
			<span>出版时间:{{book.tmake}}</span>
		</div>
		<div class="fm">
			<img :src="`http://127.0.0.1/api/public/showimg/${book.pic}`" />
			<i class="el-icon-shopping-bag-1"></i>
		</div>

		<div class="an">

			<button @click=" type='info' ">书籍详情</button>
			<button @click=" type='select' ">书籍评论</button>


			<MobileBookInfo v-show=" type == 'info' " :propInfo="book.info"></MobileBookInfo>
			<MobileBookMessage v-show=" type =='select' "></MobileBookMessage>

		</div>

		<!-- <div class="foot">
			Copyright© 2015-2025 Dianying.com
		</div> -->
	</div>
</template>

<script>
	import MobileBookInfo from '@/components/mobile/detail/MobileBookInfo.vue';
	import MobileBookMessage from '@/components/mobile/detail/MobileBookMessage.vue';
	export default {
		name: 'MobileBookDetail',
		components: {
			MobileBookInfo,
			MobileBookMessage
		},
		created() {
			this.$get('/api/public/book/findById/' + this.$route.params.bookid).then((resp) => {
				this.book = resp.data.data;
			})
		},
		data() {
			return {
				type: 'info',
				book: {},
			}
		},
		methods: {
			go(i) {
				this.$router.go(i);
			},
			addCart(){
				let token = localStorage.getItem('token');
				token = "Bearer " + token;
				let h = {
					headers: {
						'Authorization': token,}}
				this.$get('/api/public/addCart/'+this.book.id,h).then((resp)=>{
					if(resp.data.code == 200){
						alert('添加购物车成功')
					}else{
						alert('加入失败')
					}
					
				})
			}
		}
	}
</script>

<style scoped>
	.bookdetail {
		background-color: #f5d5a0;
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
		overflow-y: scroll;
	}

	.bookdetail header {
		border-bottom: 1px solid white;
		color: black;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 2rem;
	}

	.bookdetail header button {
		border: none;
		background-color: #f5d5a0;
		position: absolute;
		top: 1;
		left: 0;
	}

	.bookdetail .body {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid white;
	}

	.bookdetail .body .title {
		display: flex;
		align-items: center;
		margin-left: 1rem;
	}

	.bookdetail .body h3,
	h5 {
		color: black;
	}

	.bookdetail .body ul {
		margin: 1rem 2rem 1rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.bookdetail .body ul li {
		width: 33%;
		margin-bottom: 0.5rem;
	}

	.bookdetail .body ul li i {
		height: 3rem;
		line-height: 3rem;
		width: 3rem;
		font-size: 2rem;
	}

	.bookdetail .xx span {
		font-size: 0.8rem;
		display: flex;
		color: black;
		margin-top: 0.5rem;
		margin-left: 1rem;
	}

	.bookdetail .fm {
		margin: 1rem auto;
		display: flex;
		justify-content: center;
	}

	.bookdetail .fm i {
		font-size: 3rem;
		margin-top: 11.5rem;
	}

	.bookdetail .fm img {
		width: 40%;
	}

	.bookdetail .an button {
		padding: 10px 10px;
		border: none;
		border-radius: 6px;
		margin: 0 3rem;
	}

	.bookdetail .an button:first-child {
		background-color: #28a745;
		color: black;
	}

	.bookdetail .foot {
		width: 100%;
		height: 1.5rem;
		text-align: center;
		line-height: 1.5rem;
		background-color: #a68b5b;
		color: white;
		position: absolute;
		bottom: 0;
	}
</style>